<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Log</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcdn.net/ajax/libs/Base64/0.1.0/base64.min.js"></script>
    <![endif]-->
</head>
<style>
#log_cmd{
    width: 100%;
    height: 450px;
    background-color: #0C0C0C;
    color: #FFFFFF;
    overflow-y:scroll;
    line-height: 20px;
    font-family: Courier New;
    font-size: 12px;
}
</style>
<body>
<div class="layui-col-md12">
    <div class="layui-card">
        <pre id="log_cmd"></pre>
    </div>
</div>
<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['jquery'],function () {
        var $ = layui.jquery;
        function addMessage(message){
            var chatArea=document.getElementById("log_cmd");
            chatArea.innerHTML += message+ '<br />';
            chatArea.scrollTop = chatArea.scrollHeight;
        }
    function openSocket(){
        var socket_log,socketUrl="ws://"+window.location.host+"/log/"+localStorage.getItem("bot_qq")+"/"+window.btoa(localStorage.getItem("token"));
        if(typeof(WebSocket) == "undefined") {
            alert("你的浏览器不支持websocket，请升级到IE10以上浏览器，或者使用谷歌、火狐、360浏览器。");
        }else{
            console.log("您的浏览器支持WebSocket");
            if(socket_log!=null){
                socket_log.close();
                socket_log=null;
            }
            socket_log = new WebSocket(socketUrl);
            //打开事件
            socket_log.onopen = function() {
                console.log("websocket_log已打开");
                // $("#log_cmd").prepend("<br>websocket_log已开启");
            };
            //获得消息事件
            socket_log.onmessage = function(msg) {
                addMessage(msg.data);
                 // $("#log_cmd").prepend('<br>'+msg.data);
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket_log.onclose = function() {
                // $("#log_cmd").prepend("<br>log服务连接已断开");
                addMessage("<br>log服务连接已断开");
                console.log("websocket_log已关闭");
            };
            //发生了错误事件
            socket_log.onerror = function() {
                // $("#log_cmd").prepend("<br>log服务系统错误");
                addMessage("<br>log服务系统错误,可能未登录Bot");
                console.log("websocket_log发生了错误");
            }
        }
    }
    openSocket();
    });
</script>
</body>
</html>